<%--
  Created by IntelliJ IDEA.
  User: 翀螟
  Date: 2021/6/3
  Time: 19:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人信息</title>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
            integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
            crossorigin="anonymous"/>
</head>
<body class="mdui-drawer-body-left mdui-appbar-with-toolbar mdui-theme-primary-indigo mdui-theme-accent-pink mdui-theme-layout-auto mdui-loaded" style="background-color: #fafafa;">


<!-- 首页导航栏 -->
<div class="mdui-appbar  mdui-appbar-fixed">
    <div class="mdui-toolbar mdui-color-theme">
        <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}"><i class="mdui-icon material-icons">menu</i></a>
        <a href="javascript:;" class="mdui-typo-headline">多面体</a>
        <a href="javascript:;" class="mdui-typo-title">大学生兼职平台</a>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">search</i></a>
        <div class="mdui-toolbar-spacer"></div>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">refresh</i></a>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">settings</i></a>
    </div>
</div>

<!-- 抽屉式侧边栏 -->
<div class="mdui-drawer mdui-shadow-1" id="left-drawer" style="top:63px;background-color: #ffffff;box-shadow: 1px 0px 1px #e0e0e0;">
    <ul class="mdui-list">
        <a href="login.jsp">
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-icon material-icons mdui-list-item-icon mdui-text-color-teal-700">group</i>
                <div class="mdui-list-item-content">登录/注册</div>
            </li>
        </a>
        <a href="homePage.jsp">
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-icon material-icons mdui-list-item-icon mdui-text-color-orange-700">home</i>
                <div class="mdui-list-item-content">主页</div>
            </li>
        </a>
        <a href="personalMessage.jsp">
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-icon material-icons mdui-list-item-icon mdui-text-color-blue-800">person</i>
                <div class="mdui-list-item-content">个人信息</div>
            </li>
        </a>
        <a href="recruit.jsp">
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-green-700">star</i>
                <div class="mdui-list-item-content">招聘</div>
            </li>
        </a>
        <a href="employ.jsp">
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-red-700">send</i>
                <div class="mdui-list-item-content">应聘</div>
            </li>
        </a>
        <a href="login.jsp">
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-icon material-icons mdui-list-item-icon mdui-text-color-deep-purple-700">assignment_return</i>
                <div class="mdui-list-item-content">退出</div>
            </li>
        </a>
    </ul>
</div>

<!-- 个人资料框 -->
<div class="mdui-shadow-1 mdui-center mdui-m-b-5" style="background-color:white;width:450px;border-radius:4px;margin-top: 50px;position:relative;">

    <div class="mdui-typo-headline" style="border-radius:4px;height: 80px;opacity:0.8;">&nbsp;

        <div class="mdui-valign" style="padding: 1px;">
            <p class="mdui-center">请完善个人信息</p>
        </div>
    </div>

    <form action="personalMessage" method="post" id="loginForm"> <!-- web为根目录, 可直接写相对路径 -->
        <div class="mdui-textfield mdui-textfield-floating-label mdui-m-l-3 mdui-m-r-3 mdui-m-t-4">
            <label class="mdui-textfield" style="opacity:0.5;">性&emsp;&emsp;别：</label>
            <span style="letter-spacing:20px;">&nbsp;
                <input type="radio" style="opacity:0.5" name="userGender" id="man" value="${messageModel.object.userGender}"/><span style="opacity:0.5">男</span>&emsp;&emsp;
                <input type="radio" style="opacity:0.5" name="userGender" id="woman" value="${messageModel.object.userGender}"/><span style="opacity:0.5">女</span>
         </span>
        </div>

        <div class="mdui-m-l-3 mdui-m-r-3" style="margin-top: -5px;">

            <div class="mdui-textfield mdui-textfield-floating-label" style="opacity:0.5">
                <label class="mdui-textfield-label">姓&emsp;&emsp;名：</label>
                <input class="mdui-textfield-input" type="text" id="uname" name="userName" value="${messageModel.object.userName}"/>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label" style="opacity:0.5">
                <label class="mdui-textfield-label">所属院校：</label>
                <input class="mdui-textfield-input" type="text" name="userUniversity" id="uUni" value="${messageModel.object.userUniversity}"/>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label" style="opacity:0.5">
                <label class="mdui-textfield-label">专&emsp;&emsp;业：</label>
                <input class="mdui-textfield-input" type="text" name="userProfession" id="uPro" value="${messageModel.object.userProfession}"/>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label" style="opacity:0.5">
                <label class="mdui-textfield-label">年&emsp;&emsp;级：</label>
                <input class="mdui-textfield-input" type="text" name="userGrade" id="uGrade" value="${messageModel.object.userGrade}"/>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label" style="opacity:0.5">
                <label class="mdui-textfield-label">联系方式：</label>
                <input class="mdui-textfield-input" type="text"/>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label" style="opacity:0.5">
                <label class="mdui-textfield-label">个人邮箱：</label>
                <input class="mdui-textfield-input" type="email"/>
            </div>

            <div class="mdui-textfield mdui-textfield-floating-label" style="opacity:0.5">
                <label class="mdui-textfield-label">个人简介：</label>
                <textarea class="mdui-textfield-input" name="userProfile" id="uFile" value="${messageModel.object.userProfile}"></textarea>
            </div><br><br>

            <div class="mdui-textfield mdui-textfield-floating-label" style="opacity:0.6;margin-top: -9px;" multiple="选择文件">简&nbsp;&nbsp;历：
                <span style="letter-spacing:20px;">&nbsp;
        <input type="file" name="userResume" id="uResume" value="${messageModel.object.userResume}"></input>
       </span>
                <br>
            </div><br>

            <!-- 出错提示 -->
            <div class="mdui-valign">
                <span class="mdui-center"  style="font-size: 12px;letter-spacing:3px;opacity:0.5;color: red;">${messageModel.msg}</span>
            </div>

            <div class="mdui-m-t-5 mdui-m-b-4">
                <button class="mdui-btn mdui-btn-raised mdui-btn-block mdui-color-theme-600" type="button" id="loginBtn">提交并保存</button>
            </div><br>
        </div>
    </form>

</div>

<div class="mdui-dialog"  id="dialog">
    <div class="mdui-dialog-title">警告</div>
    <div class="mdui-dialog-content" id="msg">${messageModel.msg}</div>
    <div class="mdui-dialog-actions">
        <button  class="mdui-btn mdui-ripple" mdui-dialog-cancel>确认</button>
    </div>
</div>

<script
        src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
        integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
        crossorigin="anonymous"
></script>
</body>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">

    var inst = new mdui.Dialog('#dialog');
    $("#loginBtn").click(function(){
        // 获取字符
        var name = $("#uname").val();//名字
        var University = $("uUni").val();//院校
        var Profession = $("uPro").val();//专业
        var Grade = $("uGrade").val();//年级
        //联系方式以及个人邮箱以及在创建账号时存储到数据库
        var Profile = $("uFile").val();//个人简介
        var Resume = $("uResume").val();//简历

        if(isEmpty(name)) {
            //  如果昵称为空,提示用户(span标签赋值),并且return html()
            $("#msg").html("用户昵称不可为空!");
            inst.open();
            return;
        }
        if(isEmpty(University)) {
            //  如果院校为空,提示用户(span标签赋值),并且return html()
            $("#msg").html("请填写用户所在院校!");
            inst.open();
            return;
        }
        if(isEmpty(Profession)) {
            //  如果专业为空,提示用户(span标签赋值),并且return html()
            $("#msg").html("请填写用户所在专业!");
            inst.open();
            return;
        }
        if(isEmpty(Grade)) {
            //  如果年级为空,提示用户(span标签赋值),并且return html()
            $("#msg").html("请填写用户所在年级!");
            inst.open();
            return;
        }
        if(isEmpty(Profile)) {
            //  如果个人简介为空,提示用户(span标签赋值),并且return html()
            $("#msg").html("请简单描述个人简历!");
            inst.open();
            return;
        }

        // 暂时没编写是否选择性别以及是否选择文件的函数
        // if(isEmpty(Resume)) {
        //       //  如果简历为空,提示用户(span标签赋值),并且return html()
        //       $("#msg").html("请填写用户所在年级!");
        //       inst.open();
        //       return;
        // }

        $("#loginForm").submit();
    });

    function isEmpty(str){
        if(str == null || str.trim() == ""){  //str.trim()取出前后空格
            return true;
        }
        return false;
    }


    // event
    var dialog = document.getElementById('dialog');

    dialog.addEventListener('open.mdui.dialog', function () {
        console.log('open');
    });

    dialog.addEventListener('opened.mdui.dialog', function () {
        console.log('opened');
    });

    dialog.addEventListener('close.mdui.dialog', function () {
        console.log('close');
    });

    dialog.addEventListener('closed.mdui.dialog', function () {
        console.log('closed');
    });

    dialog.addEventListener('cancel.mdui.dialog', function () {
        console.log('cancel');
    });

    dialog.addEventListener('confirm.mdui.dialog', function () {
        console.log('confirm');
    });

</script>
</html>
